<template>
  <div class="app-container">
    <ViewSessions
      class="sousuo"
      style="margin-bottom: 15px"
      @selected="selected"
      @add="add"
    />
    <el-table
      :row-class-name="tableRowClassName"
      :data="personnelList"
      :header-row-style="{
        'background-color': '#E6E6E6',
        'font-weight': 'bold',
        color: '#333',
      }"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      height="650"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
    >
      <el-table-column show-overflow-tooltip align="center" prop="id" label="编号"/>
      <el-table-column show-overflow-tooltip align="center" prop="userName" label="姓名"/>
      <!-- <el-table-column show-overflow-tooltip align="center" prop="role" label="角色"/> -->
      <el-table-column show-overflow-tooltip align="center" prop="departmentName" label="组织/部门"/>
      <el-table-column show-overflow-tooltip align="center" prop="createDt" label="注册时间"/>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope" v-if="scope.row.deleteFlag == 0">
          <el-button
            type="text"
            size="mini"
            @click="() => upload(scope.row)"
          >修改
          </el-button>
          <el-button type="text" size="mini" @click="() => deleteUser(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="dialogFormValue"
      @close="closeDialog"
    >
      <el-form
        ref="personnel"
        :model="personnel"
        :rules="validateRules"
        label-width="120px"
      >
        <el-form-item label="姓名：" prop="name">
          <el-col :span="8">
            <el-input
              v-model="personnel.name"
              size="small"
              placeholder="请输入姓名"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="性别：" prop="gender">
          <el-col :span="8">
            <el-select
              v-model="personnel.gender"
              clearable
              placeholder="请选择性别"
            >
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="出生年月：" prop="birthMonth">
          <el-col :span="8">
            <el-date-picker
              v-model="personnel.birthMonth"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择出生年月日："
            />
          </el-col>
        </el-form-item>
        <el-form-item label="手机号：" prop="phone">
          <el-col :span="8">
            <el-input
              v-model="personnel.phone"
              size="small"
              placeholder="请输入手机号"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="组织/部门：" prop="department">
          <el-col :span="8">
            <!-- <el-input
              size="small"
              v-model="personnel.department"
              placeholder="请输入组织/部门"
            /> -->
            <el-select
              v-model="personnel.department"
              clearable
              placeholder="请选择组织/部门"
            >
              <el-option
                v-for="item in departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="角色：" prop="department">
          <el-col :span="8">
            <el-select
              v-model="personnel.roleId"
              clearable
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              />
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="append('personnel')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogDelect"
    >
      <el-input
        :rows="2"
        v-model="textDelect"
        type="textarea"
        placeholder="请输入删除理由"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="delectClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ViewSessions from './ViewSessions.vue'
import user from '../../api/acl/user.js'
export default {
  components: {
    ViewSessions
  },
  data() {
    return {
      dialogDelect: false,
      textDelect: '',
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 10, // 每页记录数
      validateRules: {
        birthMonth: [
          {
            required: true,
            message: '请选择出生年月：',
            trigger: 'change'
          }
        ],
        gender: [{ required: true, trigger: 'change', message: '请选择性别' }],
        name: [{ required: true, trigger: 'change', message: '请输入姓名' }],
        phone: [{ required: true, trigger: 'change', message: '请输入手机号' }],
        department: [
          { required: true, trigger: 'blur', message: '请选择组织/部门' }
        ]
      },
      personnelList: [],
      dialogFormVisible: false,
      dialogFormValue: '',
      genderList: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ],
      departmentList: [
        {
          value: '1',
          label: '总经办'
        },
        {
          value: '2',
          label: '业务'
        },
        {
          value: '3',
          label: '文员'
        },
        {
          value: '4',
          label: 'PM'
        },
        {
          value: '5',
          label: '外协'
        },
        {
          value: '6',
          label: '生产员工'
        },
        {
          value: '7',
          label: '生产主管'
        },
        {
          value: '8',
          label: '品检'
        },
        {
          value: '9',
          label: '会计'
        },
        {
          value: '10',
          label: '仓库'
        },
        {
          value: '11',
          label: '采购'
        },
        {
          value: '12',
          label: '总务'
        },
        {
          value: '13',
          label: '品检'
        },
        {
          value: '13',
          label: '董事长'
        },
        {
          value: '14',
          label: '生产工程师'
        },
        {
          value: '15',
          label: '生产组长'
        }
      ],
      personnel: {
        id: '',
        birthMonth: '',
        phone: '',
        name: '',
        gender: '',
        department: '',
        roleId: ''
      },
      searchInfo: {
        name: '',
        role: '',
        department: ''
      },
      roleList: []
    }
  },
  // 监听上面文本框搜索
  watch: {},

  created() {},
  mounted() {
    this.listUser()
  },
  methods: {
    roleListClick() {
      user
        .roleList({
          roleName: '',
          page: 1,
          limit: 10000
        })
        .then((response) => {
          console.log(response)
          this.roleList = response.list || [];
        })
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.deleteFlag == 1) {
        return 'warning-row'
      }
      return ''
    },
    delectClick() {
      if (this.textDelect == '') {
        this.$message({
          message: '请输入删除理由',
          duration: 1000
        })
        return
      }
      user.deleteOrder({
        deleteFlag: 1,
        id: this.delectId,
        deleteRemark: this.textDelect
      }).then((response) => {
        this.delectId = ''
        this.textDelect = ''
        this.dialogDelect = false
        this.$message({
          message: '删除成功',
          duration: 1000
        })
        this.listUser()
      })
    },
    delect(val) {
      this.delectId = val.id
      this.textDelect = ''
      this.dialogDelect = true
    },
    fetchData(val) {
      this.page = val
      this.listUser()
    },
    listUser() {
      user
        .listUser({
          department: this.searchInfo.department,
          userName: this.searchInfo.name,
          limit: this.limit,
          page: this.page,
          role: this.searchInfo.role
        })
        .then((response) => {

          this.total = response.total
          this.personnelList = response.list
          for (let i = 0; i < this.personnelList.length; i++) {
            if (this.personnelList[i].department == '1') {
              this.personnelList[i].departmentName = '总经办'
            } else if (this.personnelList[i].department == '2') {
              this.personnelList[i].departmentName = '业务'
            } else if (this.personnelList[i].department == '3') {
              this.personnelList[i].departmentName = '文员'
            } else if (this.personnelList[i].department == '4') {
              this.personnelList[i].departmentName = 'PM'
            } else if (this.personnelList[i].department == '5') {
              this.personnelList[i].departmentName = '外协'
            } else if (this.personnelList[i].department == '6') {
              this.personnelList[i].departmentName = '生产员工'
            } else if (this.personnelList[i].department == '7') {
              this.personnelList[i].departmentName = '生产主管'
            } else if (this.personnelList[i].department == '8') {
              this.personnelList[i].departmentName = '品检'
            }else if (this.personnelList[i].department == '9') {
              this.personnelList[i].departmentName = '会计'
            }else if (this.personnelList[i].department == '10') {
              this.personnelList[i].departmentName = '仓库'
            }else if (this.personnelList[i].department == '11') {
              this.personnelList[i].departmentName = '采购'
            }else if (this.personnelList[i].department == '12') {
              this.personnelList[i].departmentName = '总务'
            }else if (this.personnelList[i].department == '13') {
              this.personnelList[i].departmentName = '董事长'
            }else if (this.personnelList[i].department == '14') {
              this.personnelList[i].departmentName = '生产工程师'
            }else if (this.personnelList[i].department == '15') {
              this.personnelList[i].departmentName = '生产组长'
            }
          }
        })
    },
    closeDialog() {
      this.personnel = {
        id: '',
        birthMonth: '',
        phone: '',
        name: '',
        gender: '',
        department: '',
        roleId: ''
      }
      this.$refs.personnel.resetFields()
    },
    append(val) {
      console.log(this.personnel.department)
      this.$refs[val].validate((valid) => {
        if (valid) {
          if (this.personnel.id == '') {
            // 新增
            user
              .insertUser({
                birthday: this.personnel.birthMonth,
                phone: this.personnel.phone,
                department: this.personnel.department,
                sex: this.personnel.gender,
                userName: this.personnel.name,
                roleId: this.personnel.roleId
              })
              .then((response) => {
                this.$message({
                  message: '新增成功',
                  duration: 1000
                })
                this.dialogFormVisible = false
                this.listUser()
              })
          } else {
            user
              .updateUser({
                id: this.personnel.id,
                birthday: this.personnel.birthMonth,
                phone: this.personnel.phone,
                department: this.personnel.department,
                sex: this.personnel.gender,
                userName: this.personnel.name,
                roleId: this.personnel.roleId
              })
              .then((response) => {
                this.$message({
                  message: '修改成功',
                  duration: 1000
                })
                this.dialogFormVisible = false
                this.listUser()
              })
          }
        }
      })
    },
    restData() {
      this.dialogFormVisible = false
      this.dialogFormValue = ''
    },
    selected(val) {
      this.searchInfo = val
      this.page = 1
      this.listUser()
    },
    add() {
      this.dialogFormVisible = true
      this.dialogFormValue = '新增人员'
      this.roleListClick()
    },
    deleteUser(val) {
      if (!val.id) return false;
      this.$confirm('是否删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        user.removeUser({ id: val.id }).then(res => {
          this.$message({
              message: '删除成功',
              duration: 1000
          })
          this.listUser();
        })
      })
    },
    upload(val) {
      this.dialogFormVisible = true
      this.dialogFormValue = '修改人员'
      this.roleListClick()
      this.personnel = {
        roleId: val.roleId,
        birthMonth: val.birthday,
        phone: val.phone,
        name: val.userName,
        gender: val.sex,
        department: val.department,
        id: val.id
      }
    }
  }
}
</script>
<style>
.el-table .warning-row {
    background:#ff02027a;
  }
</style>
